/*
 * @Author: your name
 * @Date: 2021-04-07 06:25:23
 * @LastEditTime: 2021-04-09 13:07:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \my-app-koa\client\src\components\auth\Login.js
 */
import React, { Component } from 'react'
import { connect } from 'react-redux';
import { loginUser } from '../../actions/authActions';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom'
import TextFieldGroup from '../../common/TextFieldGroup'

class Login extends Component {
    constructor() {
        super()
        this.state = {
            email: '',
            password: '',
            error: {}
        }
    }
    onChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    componentDidMount() {
        if (this.props.auth.isAuthenticated) {
            this.props.history.push("/dashboard");
        }
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.auth.isAuthenticated) {
            this.props.history.push('/dashboard');
        }
        if (nextProps.errors) {
            this.setState({ errors: nextProps.errors })
        }
    }

    onSubmit = (e) => {
        e.preventDefault();
        const { email, password } = this.state
        const loginDdata = { email, password }
        this.props.loginUser(loginDdata)
    }
    render() {
        // const { errors } = this.state
        const { errors } = this.state;

        return (
            <div className="login">
                <div className="container">
                    <div className="row">
                        <div className="col-md-8 m-auto">
                            <h1 className="display-4 text-center">登录</h1>
                            <p className="lead text-center">使用已有的账户登录</p>
                            <form onSubmit={this.onSubmit}>
                                <TextFieldGroup
                                    type="email"
                                    placeholder="邮箱地址"
                                    name="email"
                                    value={this.state.email}
                                    onChange={this.onChange}
                                    error={errors && errors.email}
                                />
                                <TextFieldGroup
                                    type="password"
                                    placeholder="密码"
                                    name="password"
                                    value={this.state.password}
                                    onChange={this.onChange}
                                    error={errors && errors.password}
                                />
                                <input type="submit" className="btn btn-info btn-block mt-4" />
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        )
        // return (
        //     <div className="login">
        //         <div className="container">
        //             <div className="row">
        //                 <div className="col-md-8 m-auto">
        //                     <h1 className="display-4 text-center">登录</h1>
        //                     <p className="lead text-center">使用已有的账户登录</p>
        //                     <form onSubmit={this.onSubmit}>
        //                         <TextFieldGroup
        //                             type="email"
        //                             placeholder="邮箱地址"
        //                             name="email"
        //                             value={this.state.email}
        //                             onChange={this.onChange}
        //                             error={errors.email}
        //                         />

        //                         <TextFieldGroup
        //                             type="password"
        //                             placeholder="密码"
        //                             name="password"
        //                             value={this.state.password}
        //                             onChange={this.onChange}
        //                             error={errors.password}
        //                         />
        //                         <input type="submit" className="btn btn-info btn-block mt-4" />
        //                     </form>
        //                 </div>
        //             </div>
        //         </div>
        //     </div>
        // )
    }
}

Login.propTypes = {
    loginUser: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired
}

// 将状态映射为属性
const mapStateToProps = (state) => ({
    auth: state.auth,
    errors: state.errors
})

// export default Register
export default connect(mapStateToProps, { loginUser })(withRouter(Login))
